
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Dijit FilteringSelect</title>
		<link rel="stylesheet" href="css/demo.css" media="screen">
		<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div style="width:50%;">
			<div style="width:50%;float: left;">
				<h1>dijit/form/FilteringSelect</h1>
				<label for="stateSelect">State:</label>
				<select id="stateSelect" name="stateSelect" data-dojo-type="dijit/form/FilteringSelect"
					data-dojo-props="
						value: '',
						placeHolder: 'Select a State',
						onChange: function(value){
							document.getElementById('value').innerHTML = value;
							document.getElementById('displayedValue').innerHTML = this.get('displayedValue');
						}">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
				</select>
			</div>
			<div style="width:50%;float: right;"><h1>Values:</h1>
				<div><strong>value:</strong> <span id="value"></span></div>
				<div><strong>displayedValue:</strong> <span id="displayedValue"></span></div>
				<h5>*Note how the submitted value will be the internal option value</h5>
			</div>
		</div>

		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
		<script>
			require(["dijit/form/FilteringSelect", "dojo/parser"]);
		</script>
	</body>
</html>
